<template>
    <h1>vue组件基本属性</h1>
    <p>{{ str }}</p>
    <p>{{ num }}</p>
    <p>{{ isBool }}</p>
    <p>{{ arr }}</p>
    <p>{{ arr[0] }}</p>
    <p>{{ obj }}</p>
    <p>{{ obj.b }}</p>
    <h1>props</h1>
    <p>{{ title }}</p>
    <h1>methods</h1>
    <button @click="btnAction">点击方法</button>
    <h1>computed</h1>
    <p>{{ num2 }}</p>
    <h1>watch</h1>
    <button @click="jia">num+1</button>
    <button @click="jian">num-1</button>
</template>
<script>
export default {
    props:{
            title:""
        },
    data(){
        return{
            str:"test",
            num:1,
            isBool:true,
            arr:[1,2,3],
            obj:{
                a:'obj的a',
                b:'obj的b'
            }
        }
    },
    computed:{
        num2(){
            return this.num+1
        }
    },
    watch:{
        num:(newVal,oldVal)=>{
            console.log('newVal',newVal)
            console.log('oldVal',oldVal)
        }
    },
    methods:{
        btnAction(){
            console.log('123124')
            console.log(this.str)
            this.test()
        },
        jia(){
           this.num = this.num+1
        },
        jian(){
            this.num = this.num-1
        },
        test(){
            console.log('test methods')
        }
    }
}
</script>